<template>
	<view class="box" :style="theme">
		<!-- 会员卡 -->
		<view class="box_hy">
			<view class="boxImg"
				:style="{backgroundImage: userInfo.cardPicPath?'url(' + userInfo.cardPicPath + ')':'url(' + coverImgUrl + ')'}">
				<view class="box_box">
					<view class="box_image_title">
						<view class="box_image_title_left">
							<view class="box_image_title_left_img">
								<image :src="userInfo.showAvatar ? userInfo.showAvatar : imgHost+'/user.png'"></image>
							</view>
							<view class="box_image_title_left_name"><text>{{userInfo.nickName}}</text></view>
						</view>
						<view class="box_image_title_right" v-if="userInfo.cardName"><text>{{userInfo.cardName}}</text>
						</view>
					</view>
					<view class="box_image_ye">
						<view>账户余额：</view>
						<view><text class="big">{{userInfo.money || ''}}</text>元</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员金额 -->
		<view class="box_czje">
			<text class="box_czje_title">升级会员</text>
			<view class="box_czje_content">
				<view v-for="(item, index) in money" :key="index"
					:class="id === item.id?'box_czje_content_item active' :'box_czje_content_item'"
					@click="clickMoney(item)">
					<view class="bj"></view>
					<image v-if="id === item.id" :src="imgHost+'/vipcard_ic_select.png'"></image>
					<text>￥{{item.price}}</text>
					<text class="zdy">{{item.cardName}}</text>
				</view>
				<view class="box_czje_content_items"></view>
			</view>
		</view>
		<view v-if="policyInfo && policyInfo.policyName" class="f28 ztColor mt20" style="padding: 0 30rpx 20rpx;">优惠政策：{{ policyInfo.policyName }}</view>
		<!-- 横杠 -->
		<view class="box_h"></view>
		<!-- 会员须知 -->
		<view class="box_xz">
			<!-- 标题 -->
			<view class="box_xz_title">
				<image :src="imgHost+'/vipcard_title_left.png'"></image>
				<text>会员享受更多优惠</text>
				<image :src="imgHost+'/vipcard_title_right.png'"></image>
			</view>
			<!-- 活动项 -->
			<view class="box_xz_jx">
				<view class="box_xz_jx_item">
					<view class="img_c">
						<image :src="imgHost+'/vipcard_ic_dingchang.png'"></image>
					</view>
					<text>订场折扣</text>
				</view>
				<view class="box_xz_jx_item">
					<view class="img_c">
						<image :src="imgHost+'/vipcard_ic_taocan.png'"></image>
					</view>
					<text>套餐折扣</text>
				</view>
				<view class="box_xz_jx_item">
					<view class="img_c">
						<image :src="imgHost+'/vipcard_ic_menpiao.png'"></image>
					</view>
					<text>门票折扣</text>
				</view>
			</view>
			<!-- 须知 -->
			<view class="box_xz_name" v-if="money && money.length != 0"><text>充值规则须知</text></view>
			<!-- 须知内容 -->
			<view class="box_xz_content" v-if="money && money.length !=0">
				<view class="box_xz_content_top"></view>
				<view class="box_xz_content_bottom"></view>
				<u-parse v-if="rechargeRule" :content="rechargeRule"></u-parse>
				<block v-else>
					<text v-for="(item, index) in xzObj" :key="index">
						<text>{{index + 1}}、{{item.discountTypeName}}可享受{{item.discount}}折；</text>
					</text>
					<text>{{index}}、具体业务可享受折扣解释权归场馆所有；</text>
					<text>{{index + 1}}、卡内金额不予退款，请理性充值；</text>
				</block>
			</view>
		</view>
		<!-- 展位 -->
		<view class="box_x"></view>
		<!-- 底部充值 -->
		<view class="box_footer">
			<view class="box_footer_agree">
				<view class="checkboxBoxD" @click="isTy">
					<view class="checkboxBox" :class="isActive?'on':''">
						<u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
					</view>
				</view>
				<view>充值即视为同意<text class="ztColor" @click="open">《充值协议》</text></view>
			</view>
			<view class="footBtn mt20" @click="$noMultipleClicks(submit)">确认充值</view>
		</view>
		<u-popup :show="agreement" @close="showxy" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">温馨提示</view>
				<view class="agreement_cnt">
					请先阅读并同意<text @click="open">《充值协议》</text>
				</view>
				<view class="agreement_btns flex">
					<view @click="showxy">我再想想</view>
					<view class="agreement_qrBtn" @click="qrBtn">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				agreement: false,
				coverImgUrl: 'XXXXXXXXX',
				isActive: false,
				info: {}, //会员信息
				money: [], //会员卡列表
				xzObj: [], //须知折扣
				id: '', //会员卡id
				vipId: '', //会员id
				index: '', //须知
				policyId: '',
				rechargeRule: '',
				moneyInfo: {},
				policyInfo: {},
				show: false,
				xy: ''
			}
		},
		async onLoad(ops) {
			await this.$onLaunched;
			const scene = decodeURIComponent(ops.scene)
			if (scene && scene != 'undefined') {
				uni.setStorage({
					key: 'shareMemberId',
					data: scene
				});
				this.addShareMemberRelevance(scene)
			}
		},
		onShow() {
			if (this.userInfo && uni.getStorageSync('shareMemberId') && uni.getStorageSync('shareMemberId') !=
				'undefined') {
				this.addShareMemberRelevance(uni.getStorageSync('shareMemberId'))
			}
			this.getMembershipCard()
			this.getMemberInformation()
			// this.getYx()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			getPolicyInfo() {
				let moneyInfo = this.moneyInfo
				if(!moneyInfo || !moneyInfo.price) {
					return false
				}
				this.$app.ajax({
					data: {
						param: {
							cardTypeId: this.userInfo.cardTypeId, money: moneyInfo.price, orderType: '05'
						}
					},
					api: this.$api.getPolicyInfo()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.policyInfo = res.record || {}
					}
				}).catch(() => {})
			},
			getMemberInformation() {
				this.$app.ajax({
					data: {
						param: {}
					},
					api: this.$api.memberInformation()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.$store.commit('saveUserInfo', res.record);
					}
				}).catch(() => {})
			},
			showxy() {
				this.agreement = !this.agreement
			},
			open() {
				this.jump('/pages/home/meal?type=15&code=AGREEMENT_RECHARGE&title=','充值协议')
			},
			isTy(e) {
				this.isActive = !this.isActive
			},
			addShareMemberRelevance(shareMemberId) {
				this.$app.ajax({
					data: {
						param: {
							shareMemberId
						}
					},
					api: this.$api.addShareMemberRelevance()
				}).then((res) => {
					if (res.errorCode === '000000') {
						uni.removeStorageSync('shareMemberId');
					}
				})
			},
			qrBtn() {
				this.isActive = true
				this.agreement = false
				this.submit()
			},
			// 确认充值
			submit() {
				if (!this.isActive) {
					return this.agreement = true
				}
				if (!this.id) {
					this.$app.showToast('请先选择会员')
					return false
				}
				let that = this
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							cardTypeId: this.id,
							memberId: this.userInfo.id,
							venueId: this.venueId
						}
					},
					api: this.$api.purchaseMembershipCard()
				}).then((res) => {
					if (res.errorCode == '000000') {
						let orderId = res.record
						if (res.record) {
							this.$app.ajax({
								data: {
									userId: this.userInfo.id,
									param: {
										memberId: this.userInfo.id,
										orderId,
										payMethod: '03'
									}
								},
								api: this.$api.getPrice()
							}).then((resb) => {
								if (resb.errorCode === '000000') {
									let policyId = resb.record.policyId
									this.$app.ajax({
										data: {
											param: {
												orderId: orderId,
												payMethod: '03',
												integralUse: '0',
												policyId
											}
										},
										api: this.$api.payment()
									}).then((resc) => {
										if (resc.errorCode === '000000') {
											let data = resc.record
											// #ifdef MP-WEIXIN
											uni.getProvider({
												service: 'payment',
												success: function(res) {
													uni.requestPayment({
														provider: 'wxpay', // 服务提提供商
														timeStamp: data
															.timeStamp,
														nonceStr: data
															.nonceStr,
														package: data
															.packageStr,
														signType: 'MD5',
														paySign: data.sign,
														success: function() {
															// 支付成功回调
															that.$app
																.showToast(
																	'支付成功')
															setTimeout(
																() => {
																	that.jump(
																		'/pages/home/index',
																		'',
																		1
																	)
																}, 2000
															)
															// 支付成功通知。。。
														},
														fail: function(errb) {

														}
													});
												}
											});
											// #endif
											// #ifdef H5
											WeixinJSBridge.invoke('getBrandWCPayRequest', {
												appId: that.$store.state
													.wxId, //公众号名称，由商户传入
												timeStamp: data
													.timeStamp,
												nonceStr: data
													.nonceStr,
												package: data
													.packageStr,
												signType: 'MD5',
												paySign: data.sign,
											}, function(res) {
												if (res.err_msg ==
													'get_brand_wcpay_request:ok') {
													that.$app
														.showToast(
															'支付成功')
													setTimeout(
														() => {
															that.jump(
																'/pages/home/index',
																'',
																1
															)
														}, 2000
													)
												} else if (res.err_msg ==
													'get_brand_wcpay_request:cancel') {
													uni.showToast({
														title: '支付取消',
														icon: 'none'
													})
												}
											}, function(err) {
												console.log('err', err)
											})
											// #endif

										} else {
											this.$app.showToast(resc.errorMsg || resc.msg)
										}
									}).catch(() => {})
								} else {
									if (resb.errorCode == '70003') {
										setTimeout(() => {
											that.jump('/pages/index/index', '', 1)
										}, 2000)
									}
									this.$app.showToast(resb.errorMsg || resb.msg)
								}
							}).catch(() => {})
						}
					}
				}).catch(() => {})
			},
			// 获取会员卡列表
			getMembershipCard() {
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							channel: '0',
							type: '1'
						}
					},
					api: this.$api.getMembershipCard()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let grade = ''
						let arr = []
						for (let i = 0; i < res.recordList.length; i++) {
							if (res.recordList[i].id == this.userInfo.cardTypeId) {
								grade = res.recordList[i].level
							}
						}
						for (let s = 0; s < res.recordList.length; s++) {
							if (res.recordList[s].level <= grade) {

							} else {
								if (res.recordList[s].status == 1) {
									arr.push(res.recordList[s])
								}
							}
						}
						this.money = arr
						if (arr.length != 0) {
							this.id = arr[0].id
							this.moneyInfo = arr[0]
							this.cardTypeDetails()
						}
					}

				}).catch(() => {})
			},
			// 选择金额
			clickMoney(e) {
				this.id = e.id
				this.moneyInfo = e
				this.getPolicyInfo()
				this.cardTypeDetails()
			},
			// 获取会员卡类型详情
			cardTypeDetails() {
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param: {
							id: this.id,
						}
					},
					api: this.$api.cardTypeDetails()
				}).then((res) => {
					if (res.errorCode === '000000') {
						let arr = res.record.discounts
						let rechargeRule = res.record.rechargeRule || ''
						arr.forEach(e => {
							e.discount = (e.discount * 10).toFixed(1)
						})
						this.xzObj = arr
						this.rechargeRule = rechargeRule
						this.index = res.record.discounts.length + 1
					}
				}).catch(() => {})

			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_RECHARGE'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.xy = res.recordList[0].value
					}
				}).catch(() => {})
			},
		},
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	/*checkbox 选项框大小  */
	checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: $color;
	}

	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	page {
		width: 100%;
		height: 100%;
	}

	.box_hy {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.box_hy .boxImg {
		width: 100%;
		height: 334rpx;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
	}

	.box_image_title_left {
		display: flex;
		align-items: center;
	}

	.box_box {
		width: 100%;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box_image_title {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box_image_title_left_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #ffffff;
		overflow: hidden;
	}

	.box_image_title_left_img image {
		width: 100%;
		height: 100%;
	}

	.box_image_title_left_name {
		margin-left: 32rpx;
	}

	.box_image_title_left_name text {
		font-size: 36rpx;
		font-weight: 500;
		color: $yellow;
	}

	.box_image_title_right {
		padding: 7rpx 16rpx;
		background: $yellow;
		border-radius: 8rpx;
	}

	.box_image_title_right text {
		font-size: 22rpx;
		font-weight: 400;
		color: #5A1900;
	}

	.box_image_ye {
		display: flex;
		flex-direction: column;

		view {
			font-size: 26rpx;
			font-weight: 400;
			color: $yellow;

			text {
				font-size: 48rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				margin-right: 8rpx;
				color: $yellow;
			}
		}
	}

	.box_czje {
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.box_czje_title {
		font-size: 32rpx;
		font-weight: 600;
		color: #222222;
	}

	.box_czje_content {
		display: flex;
		margin-top: 32rpx;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.box_czje_content_items {
		width: calc(100% / 3.3);
	}

	.box_czje_content_item {
		width: calc(100% / 3.3);
		padding: 48rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border-radius: 16rpx;
		background: $bjColor;
		border: 2rpx solid #EEEEEE;
		margin-bottom: 26rpx;
		overflow: hidden;
		position: relative;

		image {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		text {
			font-size: 40rpx;
			font-weight: 500;
			color: #666666;
		}

		.bj {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background-color: $color;
			z-index: 0;
			display: none;
		}

		&.active {
			border-radius: 16rpx;
			border: 2rpx solid $color;

			.bj {
				display: block;
				opacity: 0.2;
			}

			text {
				color: #333;
			}
		}

	}

	.zdy {
		font-size: 26rpx !important;
		margin-top: 40rpx;
	}

	.weui-input {
		flex: 1 !important;
	}

	.box_x {
		height: 230rpx;
	}

	.box_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_footer_agree {
		display: flex;
		align-items: center;
	}

	.box_footer_agree text {
		font-size: 26rpx;
		margin-left: 5rpx;
	}

	.box_footer_btn {
		height: 88rpx;
		background: $color;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.box_footer_btn text {
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.box_h {
		height: 24rpx;
		background: $bjColor;
	}

	.box_xz {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.box_xz_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box_xz_title image {
		width: 94rpx;
		height: 14rpx;
	}

	.box_xz_title text {
		font-size: 30rpx;
		font-weight: 500;
		margin: 0 24rpx;
	}

	.box_xz_jx {
		display: flex;
		justify-content: space-evenly;
		margin-top: 60rpx;
	}

	.box_xz_jx_item {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.img_c {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		overflow: hidden;
		background: #FDF5F4;
	}

	.img_c image {
		width: 100%;
		height: 100%;
	}

	.box_xz_jx_item text {
		margin-top: 24rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.box_xz_name {
		width: 100%;
		text-align: center;
		margin-top: 76rpx;
		margin-bottom: 40rpx;
	}

	.box_xz_name text {
		font-size: 30rpx;
		font-weight: 500;
		color: #222222;
	}

	.box_xz_content {
		position: relative;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		background: $bjColor;
		border-radius: 0rpx 40rpx 0rpx 40rpx;
	}

	.box_xz_content_top {
		position: absolute;
		top: 0;
		left: 0;
		width: 32rpx;
		height: 32rpx;
		border-left: 4rpx solid $color;
		border-top: 4rpx solid $color;
	}

	.box_xz_content_bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 32rpx;
		height: 32rpx;
		border-right: 4rpx solid $color;
		border-bottom: 4rpx solid $color;
	}

	.box_xz_content text {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 15rpx;
	}
</style>